<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Excalidraw - Beta</title>
  <link rel="stylesheet" href="./lib/excalidraw.css">
</head>

<body>
  <div class="app excalidraw">
    <div class="layer-wrapper">
      <div class="layer-fixed">
        <section class="shapes-section">
          <div class="Island App-toolbar" style="--padding: 1;">
            <h2 class="visually-hidden" id="shapes-title">形状</h2>
            <div class="Stack Stack_horizontal" style="--gap: 1;">
              <label class="ToolIcon ToolIcon__lock ToolIcon_size_medium" title="绘制后保持所选的工具栏状态 — Q"><input class="ToolIcon_type_checkbox" type="checkbox" aria-label="绘制后保持所选的工具栏状态"
                       data-testid="toolbar-lock">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <g>
                      <path d="M13.542 8.542H6.458a2.5 2.5 0 0 0-2.5 2.5v3.75a2.5 2.5 0 0 0 2.5 2.5h7.084a2.5 2.5 0 0 0 2.5-2.5v-3.75a2.5 2.5 0 0 0-2.5-2.5Z" stroke="currentColor" stroke-width="1.25">
                      </path>
                      <path d="M10 13.958a1.042 1.042 0 1 0 0-2.083 1.042 1.042 0 0 0 0 2.083Z" stroke="currentColor" stroke-width="1.25"></path>
                      <mask id="UnlockedIcon" maskUnits="userSpaceOnUse" x="6" y="1" width="9" height="9" style="mask-type: alpha;">
                        <path stroke="none" d="M6.399 9.561V5.175c0-.93.401-1.823 1.116-2.48a3.981 3.981 0 0 1 2.693-1.028c1.01 0 1.98.37 2.694 1.027.715.658 1.116 1.55 1.116 2.481" fill="#fff">
                        </path>
                      </mask>
                      <g mask="url(#UnlockedIcon)">
                        <path stroke="none"
                              d="M5.149 9.561v1.25h2.5v-1.25h-2.5Zm5.06-7.894V.417v1.25Zm2.559 3.508v1.25h2.5v-1.25h-2.5ZM7.648 8.51V5.175h-2.5V8.51h2.5Zm0-3.334c0-.564.243-1.128.713-1.561L6.668 1.775c-.959.883-1.52 2.104-1.52 3.4h2.5Zm.713-1.561a2.732 2.732 0 0 1 1.847-.697v-2.5c-1.31 0-2.585.478-3.54 1.358L8.36 3.614Zm1.847-.697c.71 0 1.374.26 1.847.697l1.694-1.839a5.231 5.231 0 0 0-3.54-1.358v2.5Zm1.847.697c.47.433.713.997.713 1.561h2.5c0-1.296-.56-2.517-1.52-3.4l-1.693 1.839Z"
                              fill="currentColor"></path>
                      </g>
                    </g>
                  </svg>
                </div>
              </label>
              <div class="App-toolbar__divider"></div>
              <label class="ToolIcon Shape" title="抓手（平移工具） — H">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="抓手（平移工具） — H" aria-keyshortcuts="h" data-testid="toolbar-hand">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <g stroke-width="1.25">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5"></path>
                      <path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5"></path>
                      <path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5"></path>
                      <path
                            d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47">
                      </path>
                    </g>
                  </svg>
                </div>
              </label>
              <label class="ToolIcon Shape fillable" title="选择 — V 或 1">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="选择" aria-keyshortcuts="V 或 1" data-testid="toolbar-selection" checked="">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 22 22" class="" fill="none" stroke-width="1.25">
                    <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path
                            d="M6 6l4.153 11.793a0.365 .365 0 0 0 .331 .207a0.366 .366 0 0 0 .332 -.207l2.184 -4.793l4.787 -1.994a0.355 .355 0 0 0 .213 -.323a0.355 .355 0 0 0 -.213 -.323l-11.787 -4.36z">
                      </path>
                      <path d="M13.5 13.5l4.5 4.5"></path>
                    </g>
                  </svg><span class="ToolIcon__keybinding">1</span>
                </div>
              </label>
              <label class="ToolIcon Shape fillable" title="矩形 — R 或 2">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="矩形" aria-keyshortcuts="R 或 2" data-testid="toolbar-rectangle">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <g stroke-width="1.5">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <rect x="4" y="4" width="16" height="16" rx="2"></rect>
                    </g>
                  </svg><span class="ToolIcon__keybinding">2</span>
                </div>
              </label>
              <label class="ToolIcon Shape fillable" title="菱形 — D 或 3">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="菱形" aria-keyshortcuts="D 或 3" data-testid="toolbar-diamond">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <g stroke-width="1.5">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M10.5 20.4l-6.9 -6.9c-.781 -.781 -.781 -2.219 0 -3l6.9 -6.9c.781 -.781 2.219 -.781 3 0l6.9 6.9c.781 .781 .781 2.219 0 3l-6.9 6.9c-.781 .781 -2.219 .781 -3 0z">
                      </path>
                    </g>
                  </svg><span class="ToolIcon__keybinding">3</span>
                </div>
              </label>
              <label class="ToolIcon Shape fillable" title="椭圆 — O 或 4">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="椭圆" aria-keyshortcuts="O 或 4" data-testid="toolbar-ellipse">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <g stroke-width="1.5">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <circle cx="12" cy="12" r="9"></circle>
                    </g>
                  </svg><span class="ToolIcon__keybinding">4</span>
                </div>
              </label>
              <label class="ToolIcon Shape fillable" title="曲线 — C 或 5">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="曲线" aria-keyshortcuts="C 或 5" data-testid="toolbar-bezier">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M2.5 12.038c1.655-.885 5.9-3.292 8.568-4.354 2.668-1.063.101 2.821 1.32 3.104 1.218.283 5.112-1.814 5.112-1.814" stroke-width="1.25"></path>
                  </svg>
                  <span class="ToolIcon__keybinding">5</span>
                </div>
              </label>
              <label class="ToolIcon Shape fillable" title="线条 — L 或 6">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="线条" aria-keyshortcuts="L 或 6" data-testid="toolbar-line">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4.167 10h11.666" stroke-width="1.5"></path>
                  </svg><span class="ToolIcon__keybinding">6</span>
                </div>
              </label>
              <label class="ToolIcon Shape" title="自由书写 — P 或 7">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="自由书写" aria-keyshortcuts="P 或 7" data-testid="toolbar-freedraw">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <g stroke-width="1.25">
                      <path clip-rule="evenodd" d="m7.643 15.69 7.774-7.773a2.357 2.357 0 1 0-3.334-3.334L4.31 12.357a3.333 3.333 0 0 0-.977 2.357v1.953h1.953c.884 0 1.732-.352 2.357-.977Z">
                      </path>
                      <path d="m11.25 5.417 3.333 3.333"></path>
                    </g>
                  </svg><span class="ToolIcon__keybinding">7</span>
                </div>
              </label>
              <label class="ToolIcon Shape" title="文字 — T 或 8">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="文字" aria-keyshortcuts="T 或 8" data-testid="toolbar-text">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <g stroke-width="1.5">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <line x1="4" y1="20" x2="7" y2="20"></line>
                      <line x1="14" y1="20" x2="21" y2="20"></line>
                      <line x1="6.9" y1="15" x2="13.8" y2="15"></line>
                      <line x1="10.2" y1="6.3" x2="16" y2="20"></line>
                      <polyline points="5 20 11 4 13 4 20 20"></polyline>
                    </g>
                  </svg><span class="ToolIcon__keybinding">8</span>
                </div>
              </label>
              <label class="ToolIcon Shape" title="插入图像 — 9">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="插入图像" aria-keyshortcuts="9" data-testid="toolbar-image">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <g stroke-width="1.25">
                      <path d="M12.5 6.667h.01"></path>
                      <path d="M4.91 2.625h10.18a2.284 2.284 0 0 1 2.285 2.284v10.182a2.284 2.284 0 0 1-2.284 2.284H4.909a2.284 2.284 0 0 1-2.284-2.284V4.909a2.284 2.284 0 0 1 2.284-2.284Z">
                      </path>
                      <path d="m3.333 12.5 3.334-3.333c.773-.745 1.726-.745 2.5 0l4.166 4.166"></path>
                      <path d="m11.667 11.667.833-.834c.774-.744 1.726-.744 2.5 0l1.667 1.667"></path>
                    </g>
                  </svg><span class="ToolIcon__keybinding">9</span>
                </div>
              </label>
              <label class="ToolIcon Shape" title="橡皮 — E 或 0">
                <input class="ToolIcon_type_radio ToolIcon_size_medium" type="radio" name="editor-current-shape" aria-label="橡皮" aria-keyshortcuts="E 或 0" data-testid="toolbar-eraser">
                <div class="ToolIcon__icon">
                  <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                    <g stroke-width="1.5">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M19 20h-10.5l-4.21 -4.3a1 1 0 0 1 0 -1.41l10 -10a1 1 0 0 1 1.41 0l5 5a1 1 0 0 1 0 1.41l-9.2 9.3"></path>
                      <path d="M18 13.3l-6.3 -6.3"></path>
                    </g>
                  </svg><span class="ToolIcon__keybinding">0</span>
                </div>
              </label>
              <div class="App-toolbar__divider"></div>
              <button data-prevent-outside-click="true" class="dropdown-menu-button App-toolbar__extra-tools-trigger zen-mode-transition" type="button" data-testid="dropdown-menu-button" title="更多工具">
                <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                  <g stroke-width="1.5">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M12 3l-4 7h8z"></path>
                    <path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
                  </g>
                </svg>
                <div class="ai-help"> AI</div>
              </button>
            </div>
          </div>
        </section>

        <div class="tools">
          <div class="Island App-menu__left" style="--padding: 2; max-height: 740px;">
            <div class="panelColumn">
              <div>
                <h3 aria-hidden="true">描边</h3>
                <div>
                  <div role="dialog" aria-modal="true" class="color-picker-container">
                    <div class="color-picker__top-picks">
                      <button class="color-picker__button " type="button" title="#1e1e1e" data-testid="color-top-pick-#1e1e1e" style="--swatch-color: #1e1e1e;">
                        <div class="color-picker__button-outline"></div>
                      </button><button class="color-picker__button active" type="button" title="#e03131" data-testid="color-top-pick-#e03131" style="--swatch-color: #e03131;">
                        <div class="color-picker__button-outline"></div>
                      </button><button class="color-picker__button" type="button" title="#2f9e44" data-testid="color-top-pick-#2f9e44" style="--swatch-color: #2f9e44;">
                        <div class="color-picker__button-outline"></div>
                      </button><button class="color-picker__button" type="button" title="#1971c2" data-testid="color-top-pick-#1971c2" style="--swatch-color: #1971c2;">
                        <div class="color-picker__button-outline"></div>
                      </button><button class="color-picker__button" type="button" title="#f08c00" data-testid="color-top-pick-#f08c00" style="--swatch-color: #f08c00;">
                        <div class="color-picker__button-outline"></div>
                      </button>
                    </div>
                    <div style="width: 1px; height: 100%; background-color: var(--default-border-color); margin: 0px auto;"></div><button type="button" aria-haspopup="dialog" aria-expanded="false"
                            aria-controls="radix-:r5:" data-state="closed" class="color-picker__button active-color" aria-label="描边" title="显示描边颜色选择器" style="--swatch-color: #e03131;">
                      <div class="color-picker__button-outline"></div>
                    </button>
                  </div>
                </div>
              </div>
              <div>
                <h3 aria-hidden="true">背景</h3>
                <div>
                  <div role="dialog" aria-modal="true" class="color-picker-container">
                    <div class="color-picker__top-picks">
                      <button class="color-picker__button is-transparent " type="button" title="transparent" data-testid="color-top-pick-transparent" style="--swatch-color: transparent;">
                        <div class="color-picker__button-outline"></div>
                      </button><button class="color-picker__button active" type="button" title="#ffc9c9" data-testid="color-top-pick-#ffc9c9" style="--swatch-color: #ffc9c9;">
                        <div class="color-picker__button-outline"></div>
                      </button><button class="color-picker__button" type="button" title="#b2f2bb" data-testid="color-top-pick-#b2f2bb" style="--swatch-color: #b2f2bb;">
                        <div class="color-picker__button-outline"></div>
                      </button><button class="color-picker__button" type="button" title="#a5d8ff" data-testid="color-top-pick-#a5d8ff" style="--swatch-color: #a5d8ff;">
                        <div class="color-picker__button-outline"></div>
                      </button><button class="color-picker__button" type="button" title="#ffec99" data-testid="color-top-pick-#ffec99" style="--swatch-color: #ffec99;">
                        <div class="color-picker__button-outline"></div>
                      </button>
                    </div>
                    <div style="width: 1px; height: 100%; background-color: var(--default-border-color); margin: 0px auto;"></div><button type="button" aria-haspopup="dialog" aria-expanded="false"
                            aria-controls="radix-:r6:" data-state="closed" class="color-picker__button active-color " aria-label="背景" title="显示背景颜色选择器" style="--swatch-color: #ffc9c9;">
                      <div class="color-picker__button-outline"></div>
                    </button>
                  </div>
                </div>
              </div>
              <fieldset>
                <legend>填充</legend>
                <div class="buttonList buttonListIcon">
                  <label title="线条 (Option-Click)">
                    <input type="radio" name="stroke-fill" checked data-testid="hachure">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z"
                            stroke="currentColor" stroke-width="1.25"></path>
                      <mask id="FillHachureIcon" maskUnits="userSpaceOnUse" x="2" y="2" width="16" height="16" style="mask-type: alpha;">
                        <path d="M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z"
                              fill="currentColor" stroke="currentColor" stroke-width="1.25"></path>
                      </mask>
                      <g mask="url(#FillHachureIcon)">
                        <path d="M2.258 15.156 15.156 2.258M7.324 20.222 20.222 7.325m-20.444 5.35L12.675-.222m-8.157 18.34L17.416 5.22" stroke="currentColor" stroke-width="1.25"
                              stroke-linecap="round" stroke-linejoin="round"></path>
                      </g>
                    </svg>
                  </label>
                  <label title="交叉线条">
                    <input type="radio" name="stroke-fill" data-testid="cross-hatch">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g clip-path="url(#a)">
                        <path d="M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z"
                              stroke="currentColor" stroke-width="1.25"></path>
                        <mask id="FillCrossHatchIcon" maskUnits="userSpaceOnUse" x="-1" y="-1" width="22" height="22" style="mask-type: alpha;">
                          <path d="M2.426 15.044 15.044 2.426M7.383 20 20 7.383M0 12.617 12.617 0m-7.98 17.941L17.256 5.324m-2.211 12.25L2.426 4.956M20 12.617 7.383 0m5.234 20L0 7.383m17.941 7.98L5.324 2.745"
                                stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                        </mask>
                        <g mask="url(#FillCrossHatchIcon)">
                          <path d="M14.121 2H5.88A3.879 3.879 0 0 0 2 5.879v8.242A3.879 3.879 0 0 0 5.879 18h8.242A3.879 3.879 0 0 0 18 14.121V5.88A3.879 3.879 0 0 0 14.121 2Z" fill="currentColor">
                          </path>
                        </g>
                      </g>
                      <defs>
                        <clipPath id="a">
                          <path fill="#fff" d="M0 0h20v20H0z"></path>
                        </clipPath>
                      </defs>
                    </svg>
                  </label>
                  <label title="实心">
                    <input type="radio" name="stroke-fill" data-testid="solid">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g clip-path="url(#a)">
                        <path d="M4.91 2.625h10.18a2.284 2.284 0 0 1 2.285 2.284v10.182a2.284 2.284 0 0 1-2.284 2.284H4.909a2.284 2.284 0 0 1-2.284-2.284V4.909a2.284 2.284 0 0 1 2.284-2.284Z"
                              stroke="currentColor" stroke-width="1.25"></path>
                      </g>
                      <defs>
                        <clipPath id="a">
                          <path fill="#fff" d="M0 0h20v20H0z"></path>
                        </clipPath>
                      </defs>
                    </svg>
                  </label>
                </div>
              </fieldset>
              <fieldset>
                <legend>描边宽度</legend>
                <div class="buttonList buttonListIcon">
                  <label class="active" title="细">
                    <input type="radio" name="stroke-width" data-testid="thin" checked="">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M4.167 10h11.666" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg></label>
                  <label class="" title="粗">
                    <input type="radio" name="stroke-width" data-testid="bold">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5 10h10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg></label>
                  <label class="" title="特粗">
                    <input type="radio" name="stroke-width" data-testid="extraBold">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5 10h10" stroke="currentColor" stroke-width="3.75" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg></label>
                </div>
              </fieldset>
              <fieldset>
                <legend>边框样式</legend>
                <div class="buttonList buttonListIcon">
                  <label class="active" title="实线">
                    <input type="radio" name="strokeStyle" checked data-testid="solid">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M4.167 10h11.666" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg></label>
                  <label title="虚线">
                    <input type="radio" name="strokeStyle" data-testid="dashed">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g stroke-width="2">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M5 12h2"></path>
                        <path d="M17 12h2"></path>
                        <path d="M11 12h2"></path>
                      </g>
                    </svg>
                  </label>
                  <label title="点虚线">
                    <input type="radio" name="strokeStyle" data-testid="dotted">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g stroke-width="2">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M4 12v.01"></path>
                        <path d="M8 12v.01"></path>
                        <path d="M12 12v.01"></path>
                        <path d="M16 12v.01"></path>
                        <path d="M20 12v.01"></path>
                      </g>
                    </svg></label>
                </div>
              </fieldset>
              <fieldset>
                <legend>线条风格</legend>
                <div class="buttonList buttonListIcon">
                  <label class="active" title="朴素">
                    <input type="radio" name="sloppiness" checked data-testid="plain">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M2.5 12.038c1.655-.885 5.9-3.292 8.568-4.354 2.668-1.063.101 2.821 1.32 3.104 1.218.283 5.112-1.814 5.112-1.814" stroke-width="1.25"></path>
                    </svg>
                  </label>
                  <label title="艺术">
                    <input type="radio" name="sloppiness" data-testid="art">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M2.5 12.563c1.655-.886 5.9-3.293 8.568-4.355 2.668-1.062.101 2.822 1.32 3.105 1.218.283 5.112-1.814 5.112-1.814m-13.469 2.23c2.963-1.586 6.13-5.62 7.468-4.998 1.338.623-1.153 4.11-.132 5.595 1.02 1.487 6.133-1.43 6.133-1.43"
                            stroke-width="1.25"></path>
                    </svg>
                  </label>
                  <label title="漫画家">
                    <input type="radio" name="sloppiness" data-testid="cartoonist">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M2.5 11.936c1.737-.879 8.627-5.346 10.42-5.268 1.795.078-.418 5.138.345 5.736.763.598 3.53-1.789 4.235-2.147M2.929 9.788c1.164-.519 5.47-3.28 6.987-3.114 1.519.165 1 3.827 2.121 4.109 1.122.281 3.839-2.016 4.606-2.42"
                            stroke-width="1.25"></path>
                    </svg></label>
                </div>
              </fieldset>
              <fieldset>
                <legend>边角</legend>
                <div class="buttonList buttonListIcon">
                  <label title="尖锐">
                    <input type="radio" name="edges" checked data-testid="miter">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><svg
                           stroke-width="1.5">
                        <path d="M3.33334 9.99998V6.66665C3.33334 6.04326 3.33403 4.9332 3.33539 3.33646C4.95233 3.33436 6.06276 3.33331 6.66668 3.33331H10"></path>
                        <path d="M13.3333 3.33331V3.34331"></path>
                        <path d="M16.6667 3.33331V3.34331"></path>
                        <path d="M16.6667 6.66669V6.67669"></path>
                        <path d="M16.6667 10V10.01"></path>
                        <path d="M3.33334 13.3333V13.3433"></path>
                        <path d="M16.6667 13.3333V13.3433"></path>
                        <path d="M3.33334 16.6667V16.6767"></path>
                        <path d="M6.66666 16.6667V16.6767"></path>
                        <path d="M10 16.6667V16.6767"></path>
                        <path d="M13.3333 16.6667V16.6767"></path>
                        <path d="M16.6667 16.6667V16.6767"></path>
                      </svg>
                    </svg>
                  </label>
                  <label title="圆润">
                    <input type="radio" name="edges" data-testid="round">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M4 12v-4a4 4 0 0 1 4 -4h4"></path>
                        <line x1="16" y1="4" x2="16" y2="4.01"></line>
                        <line x1="20" y1="4" x2="20" y2="4.01"></line>
                        <line x1="20" y1="8" x2="20" y2="8.01"></line>
                        <line x1="20" y1="12" x2="20" y2="12.01"></line>
                        <line x1="4" y1="16" x2="4" y2="16.01"></line>
                        <line x1="20" y1="16" x2="20" y2="16.01"></line>
                        <line x1="4" y1="20" x2="4" y2="20.01"></line>
                        <line x1="8" y1="20" x2="8" y2="20.01"></line>
                        <line x1="12" y1="20" x2="12" y2="20.01"></line>
                        <line x1="16" y1="20" x2="16" y2="20.01"></line>
                        <line x1="20" y1="20" x2="20" y2="20.01"></line>
                      </g>
                    </svg></label>
                </div>
              </fieldset>
              <fieldset class="line-point hide">
                <legend>端点</legend>
                <div class="iconSelectList buttonList">
                  <div>
                    <button type="button" title="左端点">
                      <input type="radio" name="arrowstart" data-testid="arrow-start">
                      <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20">
                        <path d="M6 10H34" stroke="currentColor" stroke-width="2" fill="none"></path>
                      </svg>
                    </button>
                  </div>
                  <div>
                    <button type="button" title="右端点">
                      <input type="radio" name="arrowend" data-testid="arrow-end">
                      <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20">
                        <g transform="" stroke="currentColor" stroke-width="2" fill="none">
                          <path d="M34 10H6M34 10L27 5M34 10L27 15"></path>
                          <path d="M27.5 5L34.5 10L27.5 15"></path>
                        </g>
                      </svg>
                    </button>
                  </div>
                  <div class="hide">
                    <div class="popover" tabindex="-1">
                      <div class="picker" role="dialog" aria-modal="true" aria-label="arrowhead_end">
                        <div class="picker-content">
                          <label class="picker-option" title="无 — Q" aria-label="无" aria-keyshortcuts="q">
                            <input type="radio" name="arrow-end" data-testid="">
                            <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20">
                              <path d="M6 10H34" stroke="currentColor" stroke-width="2" fill="none"></path>
                            </svg>
                            <span class="picker-keybinding">q</span>
                          </label>
                          <label class="picker-option" title="箭头 — W" aria-label="箭头" aria-keyshortcuts="w">
                            <input type="radio" name="arrow-end" data-testid="" checked>
                            <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20">
                              <g transform="" stroke="currentColor" stroke-width="2" fill="none">
                                <path d="M34 10H6M34 10L27 5M34 10L27 15"></path>
                                <path d="M27.5 5L34.5 10L27.5 15"></path>
                              </g>
                            </svg>
                            <span class="picker-keybinding">w</span>
                          </label>
                          <label class="picker-option" title="条状 — E" aria-label="条状" aria-keyshortcuts="e">
                            <input type="radio" name="arrow-end" data-testid="">
                            <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20">
                              <g transform="">
                                <path d="M34 10H5.99996M34 10L34 5M34 10L34 15" stroke="currentColor" stroke-width="2" fill="none"></path>
                              </g>
                            </svg>
                            <span class="picker-keybinding">e</span>
                          </label>
                          <label class="picker-option" title="三角箭头 — T" aria-label="三角箭头" aria-keyshortcuts="t">
                            <input type="radio" name="arrow-end" data-testid="">
                            <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20">
                              <g stroke="currentColor" fill="currentColor" transform="">
                                <path d="M32 10L6 10" stroke-width="2"></path>
                                <path d="M27.5 5.5L34.5 10L27.5 14.5L27.5 5.5"></path>
                              </g>
                            </svg>
                            <span class="picker-keybinding">t</span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="textbox-fieldset hidden">
                <legend>字体大小</legend>
                <div class="buttonList buttonListIcon">
                  <label title="小">
                    <input type="radio" name="font-size" data-testid="small" checked>
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g clip-path="url(#a)">
                        <path d="M14.167 6.667a3.333 3.333 0 0 0-3.334-3.334H9.167a3.333 3.333 0 0 0 0 6.667h1.666a3.333 3.333 0 0 1 0 6.667H9.167a3.333 3.333 0 0 1-3.334-3.334" stroke="currentColor"
                              stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                      </g>
                      <defs>
                        <clipPath id="a">
                          <path fill="#fff" d="M0 0h20v20H0z"></path>
                        </clipPath>
                      </defs>
                    </svg>
                  </label>
                  <label class="active" title="中">
                    <input type="radio" name="font-size" data-testid="medium">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g clip-path="url(#a)">
                        <path d="M5 16.667V3.333L10 15l5-11.667v13.334" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                      </g>
                      <defs>
                        <clipPath id="a">
                          <path fill="#fff" d="M0 0h20v20H0z"></path>
                        </clipPath>
                      </defs>
                    </svg>
                  </label>
                  <label title="大">
                    <input type="radio" name="font-size" data-testid="large">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g clip-path="url(#a)">
                        <path d="M5.833 3.333v13.334h8.334" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                      </g>
                      <defs>
                        <clipPath id="a">
                          <path fill="#fff" d="M0 0h20v20H0z"></path>
                        </clipPath>
                      </defs>
                    </svg>
                  </label>
                  <label title="加大">
                    <input type="radio" name="font-size" data-testid="veryLarge">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <path d="m1.667 3.333 6.666 13.334M8.333 3.333 1.667 16.667M11.667 3.333v13.334h6.666" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round">
                      </path>
                    </svg>
                  </label>
                </div>
              </fieldset>
              <fieldset class="textbox-fieldset hidden">
                <legend>字体</legend>
                <div class="buttonList buttonListIcon">
                  <label title="手写">
                    <input type="radio" name="font-family" data-testid="virgil">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g stroke-width="1.25">
                        <path clip-rule="evenodd" d="m7.643 15.69 7.774-7.773a2.357 2.357 0 1 0-3.334-3.334L4.31 12.357a3.333 3.333 0 0 0-.977 2.357v1.953h1.953c.884 0 1.732-.352 2.357-.977Z"></path>
                        <path d="m11.25 5.417 3.333 3.333"></path>
                      </g>
                    </svg>
                  </label>
                  <label title="普通">
                    <input type="radio" name="font-family" data-testid="normal">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5.833 16.667v-10a3.333 3.333 0 0 1 3.334-3.334h1.666a3.333 3.333 0 0 1 3.334 3.334v10M5.833 10.833h8.334"></path>
                      </g>
                    </svg>
                  </label>
                  <label class="active" title="代码">
                    <input type="radio" name="font-family" data-testid="code" checked="">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g clip-path="url(#a)" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5.833 6.667 2.5 10l3.333 3.333M14.167 6.667 17.5 10l-3.333 3.333M11.667 3.333 8.333 16.667"></path>
                      </g>
                      <defs>
                        <clipPath id="a">
                          <path fill="#fff" d="M0 0h20v20H0z"></path>
                        </clipPath>
                      </defs>
                    </svg>
                  </label>
                </div>
              </fieldset>
              <fieldset class="textbox-fieldset hidden">
                <legend>文本对齐</legend>
                <div class="buttonList buttonListIcon">
                  <label class="" title="左对齐">
                    <input type="radio" name="text-align" data-testid="left">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <line x1="4" y1="8" x2="20" y2="8"></line>
                        <line x1="4" y1="12" x2="12" y2="12"></line>
                        <line x1="4" y1="16" x2="16" y2="16"></line>
                      </g>
                    </svg>
                  </label>
                  <label class="active" title="居中">
                    <input type="radio" name="text-align" data-testid="center" checked>
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <line x1="4" y1="8" x2="20" y2="8"></line>
                        <line x1="8" y1="12" x2="16" y2="12"></line>
                        <line x1="6" y1="16" x2="18" y2="16"></line>
                      </g>
                    </svg>
                  </label>
                  <label class="" title="右对齐">
                    <input type="radio" name="text-align" data-testid="right">
                    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <line x1="4" y1="8" x2="20" y2="8"></line>
                        <line x1="10" y1="12" x2="20" y2="12"></line>
                        <line x1="8" y1="16" x2="20" y2="16"></line>
                      </g>
                    </svg>
                  </label>
                </div>
              </fieldset>
              <label class="control-label">
                透明度
                <input type="range" min="0" max="100" step="10" value="100">
              </label>
              <fieldset>
                <legend>图层</legend>
                <div class="buttonList">
                  <button type="button" class="zIndexButton" title="置于底层 — Cmd+Option+[">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="transform: rotate(180deg);">
                      <g stroke-width="1.5">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M12 10l0 10"></path>
                        <path d="M12 10l4 4"></path>
                        <path d="M12 10l-4 4"></path>
                        <path d="M4 4l16 0"></path>
                      </g>
                    </svg>
                  </button>
                  <button type="button" class="zIndexButton" title="下移一层 — Cmd+[">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="transform: rotate(180deg);">
                      <g stroke-width="1.5">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M12 5l0 14"></path>
                        <path d="M16 9l-4 -4"></path>
                        <path d="M8 9l4 -4"></path>
                      </g>
                    </svg>
                  </button>
                  <button type="button" class="zIndexButton" title="上移一层 — Cmd+]">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g stroke-width="1.5">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M12 5l0 14"></path>
                        <path d="M16 9l-4 -4"></path>
                        <path d="M8 9l4 -4"></path>
                      </g>
                    </svg>
                  </button>
                  <button type="button" class="zIndexButton" title="置于顶层 — Cmd+Option+]">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                      <g stroke-width="1.5">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M12 10l0 10"></path>
                        <path d="M12 10l4 4"></path>
                        <path d="M12 10l-4 4"></path>
                        <path d="M4 4l16 0"></path>
                      </g>
                    </svg>
                  </button>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
      </div>

    </div>
    <canvas id="myCanvas"></canvas>
  </div>

  <script src="./lib/Shape.js"></script>
  <script src="./lib/excalidraw.js"></script>

</body>

</html>
